<template>
  <div class="home_bg">
    <el-carousel
      height="100vh"
      direction="vertical"
      :autoplay="false"
    >
      <el-carousel-item
        v-for="item in bgImg"
        :key="item"
      >
        <img
          class="bg_img"
          :src="item"
          alt=""
        >
      </el-carousel-item>
    </el-carousel>
    <div>
      <el-button color="#626aef">Default</el-button>
    </div>
    <div
      id="ww_login"
      class="ww_login ww_login1"
    >1</div>

  </div>
</template>

<script setup lang="ts">
import bgImg from "@/utils/bgImg";
import * as ww from '@wecom/jssdk'
  // 初始化
  ww.createWWLoginPanel({
    el: '.ww_login',
    params: {
      appid: 'wwbbb6a7b539f2xxxxx',
      agentid: '10000xx',
      redirect_uri: 'https://work.weixin.qq.com',
      state: 'loginState',
    },
    onCheckWeComLogin({ isWeComLogin }) {
      console.log(isWeComLogin)
    },
    onLoginSuccess({ code }) {
      console.log({ code })
    },
    onLoginFail(err) {
      console.log(err)
    },
  })

  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// 该代码仅用于快速接入，请勿在生产环境对外暴露JSAPI_TICKET
// Ticket有效期为2个小时，过期后请手动更换
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
const JSAPI_TICKET = 'sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg '

ww.register({
  corpId: 'ww7ca4776b2a70000',
  jsApiList: ['selectExternalContact'],
  getConfigSignature() {
    return ww.getSignature(JSAPI_TICKET)
  }
})

// 调用 register 后可以立刻调用其他 JS 接口
ww.selectExternalContact({
  success(res) {
    alert(JSON.stringify(res))
  }
})

// // 可以立刻调用JS接口，无需等待ready回调
// ww.selectExternalContact({
//   success(res) {
//     console.log(res.userIds[0])
//   }
// })

// 卸载
// wwLogin.unmount()


</script>

<style lang="less" scoped>
.bg_home {
  width: 100vw;
  height: 100vh;
}

.bg_img {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  object-fit: cover;
  overflow: visible;
}

.ww_login1 {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}</style>
